Vue笔记

2023-06-27 10:07| 来源: 网络整理| 查看: 265

$on方法是Vue对象的一个实例方法，它主要用于在Vue实例中监听一个自定义事件，当一个自定义事件被触发时，可以执行一个回调函数来响应该事件。

$on方法的语法如下：

vm.$on(event,callback)

举例说明：

const vm = new Vue() vm.$on('openBox', data =>{ console.log('开宝箱～', data) })

上面案例是监听实例化对象vm的openBox事件，并通过一个匿名函数作为回调函数，当test事件被触发时执行匿名函数(回调函数)。

那么如何触发事件呢?

通过该实例化对象的$emit事件去触发，语法如下：

vm.$emit(event, 会调函数传参)

举例说明：

const vm = new Vue() vm.$on('openBox', data =>{ console.log('开宝箱～', data) }) callback(){ vm.$emit('openBox', {name:"超超"}) }

上述案例中在callback 函数执行时，就会触发实例化对象vm的openBox方法，与此同时$on绑定的回调函数就会被执行，打印值为“开宝箱～，{name：‘超超’}”

tips:$on方法只在当前Vue实例上进行自定义事件的监听，而不会影响其他实例

【本文地址】

公司简介

联系我们